<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" th:href="@{/layui-v2.4.5/layui/css/layui.css}"
	media="all">

</head>
<body>
	<div class="person-center">

		<!--页面主体-->
		<div class="content">
			<div class="person-center-content">
				<div class="layui-main cl">
					<div class="main layui-form timo-compile">
						<form>
							<div class="layui-form-item city" style="margin-bottom: -8px;">
								            <label class="layui-form-label">所负责区域</label>      
								<div class="layui-inline">
									<div class="layui-input-inline"
										style="width: 90px; margin-right: 0px; margin-bottom: 0px;">
										            <select id="uprovinceId" name="provinceId"
											lay-verify="required" lay-search="" lay-filter="uprovinceId">
											<!-- <option value="-1">请选择</option> -->            
										</select>            
									</div>
								</div>
								           
								<div class="layui-inline">
									           
									<div class="layui-input-inline"
										style="width: 90px; margin-right: 0px; margin-bottom: 0px;">
										            <select id="ucityId" name="cityId"
											lay-verify="required" lay-search="" lay-filter="ucityId"
											onchange="initDistrictList()">            
											<!-- <option value="-1">请选择</option> -->            
										</select>            
									</div>
									           
								</div>
								           
								<div class="layui-inline">
									           
									<div class="layui-input-inline"
										style="width: 90px; margin-right: 0px; margin-bottom: 0px;">
										            <select id="udistrictId" name="districtId"
											lay-verify="required" lay-search="">            
											<!-- <option value="-1">请选择</option> -->            
										</select>            
									</div>
									           
								</div>
								           
							</div>

							<input type="hidden" th:value="${provinceId }" id="oldProvinceId"/>
							<input type="hidden" th:value="${cityId }" id="oldCityId"/>
							<input type="hidden" th:value="${countyId }" id="oldDistrictId"/>

						</form>
					</div>
				</div>
			</div>
		</div>
	</div>

	<script th:src="@{/js/jquery/jquery-3.3.1.js}" charset="utf-8"></script>
	<script th:src="@{/layui-v2.4.5/layui/layui.all.js}" charset="utf-8"></script>

	<script type="text/javaScript">


    //  初始化省份列
    function initProvinceList(flag){
    	
        var  provinceId = $("#oldProvinceId").val();

        $("#uprovinceId").append("<option value='" + -1 +"'>" + '请选择' + "</option>");
        $("#udistrictId").append("<option value='" + -1 + "'>" + '请选择' + "</option>");
        $("#ucityId").append("<option value='" + -1 + "'>" + '请选择' + "</option>");

        var url = "/address/findAddress";
        $.post(url, {pid: 0}, function(result){
            var list = result.data;
            for (i = 0; i < list.length; i++) {
                var name = list[i].title;
                var id = list[i].id;
                if(id == provinceId){
                    $("#uprovinceId").append("<option value='" + id + "' selected>" + name + "</option>");
                }else{
                    $("#uprovinceId").append("<option value='" + id + "'>" + name + "</option>");
                }
            }

            layui.use(['form'],function(){
                var form = layui.form;
                form.render();
            });
        });
    }

    //  初始化城市列表
    function initCityList(flag){
        var provinceId = $("#uprovinceId").val();
        var oldProvinceId = $("#oldProvinceId").val();

        if(provinceId == -1 && flag == "init"){
            provinceId = oldProvinceId;
        }
        
        var  cityId = $("#oldCityId").val();
        $("#ucityId").empty();
        $("#ucityId").append("<option value='" + -1 + "'>" + '请选择' + "</option>");
        $("#udistrictId").empty();
        $("#udistrictId").append("<option value='" + -1 + "'>" + '请选择' + "</option>");

        var url = "/address/findAddress";
        $.post(url, {pid: provinceId}, function(result){
            var list = result.data;
            for (i = 0; i < list.length; i++) {
                var name = list[i].title;
                var id = list[i].id;
                if(id == cityId){
                    $("#ucityId").append("<option value='" + id + "' selected>" + name + "</option>");
                }else{
                    $("#ucityId").append("<option value='" + id + "'>" + name + "</option>");
                }
            }

            layui.use(['form'],function(){
                var form = layui.form;
                form.render();
            });
        });
    }

    // 初始化区列表
    function initDistrictList(flag){
        var  cityId = $("#ucityId").val();
        var oldCityId = $("#oldCityId").val();

        if(cityId == -1 && flag == "init"){
            cityId = oldCityId;
        }

        var  districtId = $("#oldDistrictId").val();
        $("#udistrictId").empty();
        $("#udistrictId").append("<option value='" + -1 + "'>" + '请选择' + "</option>");

        var url = "/address/findAddress";
        $.post(url, {pid: cityId}, function(result){
            var list = result.data;
            for (i = 0; i < list.length; i++) {
                var name = list[i].title;
                var id = list[i].id;
                if( id == districtId){
                    $("#udistrictId").append("<option value='" + id + "' selected>" + name + "</option>");
                }else{
                    $("#udistrictId").append("<option value='" + id + "'>" + name + "</option>");
                }
            }
            layui.use(['form'],function(){
                var form = layui.form;
                form.render();
            });
        });
    }

    //监听取消按钮
    $(document).on("click",".cancel",function(){
        layer.closeAll("page");
    });

    $(function(){
        // 初始化省份列表
        initProvinceList('init');
        initCityList('init');
        initDistrictList('init');
    });


    /*
     这里面有个问题就是   选择的时候    如果  请选择  的value 是“” 空字符串，当选择从河北省变到请选择时不会触发这个监听事件
    */
    layui.use(['form', 'upload'],function(){
        var form = layui.form;
        // 监听省份选择
        form.on('select(uprovinceId)', function(data){
            initCityList('change');
        });
        // 监听城市选择
        form.on('select(ucityId)', function(data){
            initDistrictList('change');
        });
        // 监听修改提交
        form.on('submit(update)', function(data){
//           updateAccount();
            form.render();
            return false; // 阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });



    });

</script>


</body>
</html>